<template>
    <div class="wrapper" v-loading="loading">

        <!-- header部分 -->
        <header>
            <p>我的订单</p>
        </header>

        <!-- 订单列表部分 -->
        <h3>未支付订单信息：</h3>
        <ul class="order">
            <li v-for="item in list" v-if="item.status===1">
                <div class="order-info">
                    <p>
                        {{item.shopName}}
                        <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;{{item.allPrice}}</p>
                        <div class="order-info-right-icon" @click="topayment(item.orderId)">去支付</div>
                    </div>
                </div>
                <ul class="order-detailet" v-show="item.isShowDetailet">
                    <li v-for="odItem in item.dishOrderInfoList">
                        <p>{{odItem.name}} x {{odItem.count}}</p>
                        <p>&#165;{{odItem.price*odItem.count}}</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;{{item.dprice}}</p>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- 待评价订单信息 -->
        <h3>待评价订单信息：</h3>
        <ul class="order">
            <li v-for="item in list" v-if="item.status===2">
                <div class="order-info">
                    <p>
                        {{item.shopName}}
                        <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;{{item.allPrice}}</p>
                        <div class="order-info-right-icon" style="background-color: lightgreen;"
                             @click="toevaluate(item.orderId)">去评价
                        </div>
                    </div>
                </div>
                <ul class="order-detailet" v-show="item.isShowDetailet">
                    <li v-for="odItem in item.dishOrderInfoList">
                        <p>{{odItem.name}} x {{odItem.count}}</p>
                        <p>&#165;{{odItem.price*odItem.count}}</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;{{item.dprice}}</p>
                    </li>
                </ul>
            </li>
        </ul>
        <h3>已支付订单信息：</h3>
        <ul class="order">
            <li v-for="item in list" v-if="item.status===3">
                <div class="order-info">
                    <p>
                        {{item.shopName}}
                        <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;{{item.allPrice}}</p>
                    </div>
                </div>
                <ul class="order-detailet" v-show="item.isShowDetailet">
                    <li v-for="odItem in item.dishOrderInfoList">
                        <p>{{odItem.name}} x {{odItem.count}}</p>
                        <p>&#165;{{odItem.price*odItem.count}}</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;{{item.dprice}}</p>
                    </li>
                </ul>
            </li>
        </ul>

        <!-- 底部菜单部分 -->
        <Footer></Footer>

    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: 'OrderList',
        data() {
            return {
                orderArr: [],
                user: {},
                list: [],
                loading: true
            }
        },
        created() {
            this.user = JSON.parse(this.$getSessionStorage('user'));
            this.findAll()

        },
        methods: {
            topayment(orderId) {
                this.$router.push({path: '/payment', query: {orderId: orderId}});
            },
            toevaluate(orderId) {
                this.$router.push({path: '/evaluate', query: {orderId: orderId}});
            },
            async findAll() {
                if (this.user === null) {
                    this.$alert_msg("请先登录")
                    this.$router.push({path: '/login'})
                    return
                }

                let url = "/order/" + this.user.id
                const res = await this.$ajax_(url, null, 'get')
                let temp = []
                res.data.list.map(e => {
                    e.isShowDetailet = false
                    temp.push(e)
                })
                this.list = temp
                console.log(this.list)
                this.loading = false
            },
            detailetShow(orders) {
                orders.isShowDetailet = !orders.isShowDetailet;
            }
        },
        components: {
            Footer
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 历史订单列表部分 ******************/
    .wrapper h3 {
        margin-top: 12vw;
        box-sizing: border-box;
        padding: 4vw;
        font-size: 4vw;
        font-weight: 300;
        color: #999;
    }

    .wrapper .order {
        width: 100%;
    }

    .wrapper .order li {
        width: 100%;
    }

    .wrapper .order li .order-info {
        box-sizing: border-box;
        padding: 2vw 4vw;
        font-size: 4vw;
        color: #666;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .order li .order-info .order-info-right {
        display: flex;
    }

    .wrapper .order li .order-info .order-info-right .order-info-right-icon {
        background-color: #f90;
        color: #fff;
        border-radius: 3px;
        margin-left: 2vw;
        user-select: none;
        cursor: pointer;
    }

    .wrapper .order li .order-detailet {
        width: 100%;
    }

    .wrapper .order li .order-detailet li {
        width: 100%;
        box-sizing: border-box;
        padding: 1vw 4vw;
        color: #666;
        font-size: 3vw;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
